<template>
  <div class="user">
    <!-- 名字、性别、简介、头像（性别： 0女 1男） -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card style="width: 100%">
          <div>
            <el-avatar
              :size="200"
              :src="commonStore.user.imageUrl"
            />
          </div>
          <div class="username">{{ commonStore.user.username }}</div>
          <div class="editUser">
            <el-button type="primary" size="small" @click="toEdit">编辑</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card style="width: 100%">
          <div slot="header">更新个人信息</div>
          <div>
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
              size="default"
              status-icon
              :disabled="isDisabled"
            >
              <el-form-item label="用户名" prop="username" >
                <el-input v-model="ruleForm.username" />
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <!-- <el-input v-model="ruleForm.gender" /> -->
                <el-select
      v-model="ruleForm.gender"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
              </el-form-item>
              <el-form-item label="用户简介" prop="introduce">
                <el-input type="textarea" v-model="ruleForm.introduce" />
              </el-form-item>

              <el-form-item label="头像" prop="imageUrl">
                <el-upload
                  class="avatar-uploader"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false"
                >
                  <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                  更新信息
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script name="user" setup>
import { useCommonStore } from "@/store/common";
import {ref, reactive } from "vue";
import { Plus } from '@element-plus/icons-vue'
const isDisabled = ref('true')
const commonStore = useCommonStore();
const ruleForm = reactive({
  username: commonStore.user.username,
  gender: commonStore.user.gender,
  introduce: commonStore.user.introduce,
  imageUrl: commonStore.user.imageUrl
});
const options=[
  {label: '女',value: 0},
  {label: '男',value: 1},
]
const rules=reactive({
  username: [{require: true,message: '用户名不能为空',trigger:'blur' }],
  introduce: [{require: true, message: '请输入个人简介',trigger: 'blur'}],
  imageUrl: [{require:true, message:'请上传个人头像',trigger: 'blur'}]
})
const toEdit = ()=>{
  isDisabled.value = false
}
const submitForm = (val)=>{
  console.log(val,'val');
  
  if(!val) return;
  console.log(val);
  val.validate((valid)=>{
    console.log(valid,'valid');
    
  })
}
</script>

<style scoped lang="scss">
.el-row {
  margin-top: 20px;
  .username {
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
}
.editUser {
text-align: center;
margin-top: 5px;
}
::v-deep {
  .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
}
}
</style>
